<!DOCTYPE html>
<html lang="en">
    <head>
        <title> WebInt Lab 1</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
		<script type="text/javascript" src="js.js"></script>
    </head>
    <body>
    <header>
        <h1 class="header">WEBINT LAB 1</h1>
    </header>
    <nav class="top_nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ARCHIVE</a></li>
            <li><a href="#">CONTENT</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>

    <section class="content">
        
      <article class="post">
        <header class="post_header">
          Let's try to be geolocalized
        </header>
        
        <section class="post_content">             
			<form id="geolocation-form" method="post" action="#" onSubmit = "return false">

				<input type="button" id="init-map" value="Show my location!" onclick="showMap()"/>
				<div id="google-map">Please click on the button to display the map</div>

				<p>Now, you can also enter a specific location, and display it on the map : </p>
				<input type="text" id="location-box" />
				<input type="button" id="update-map" value="Update the map" onclick="updateMap()"/>

			</form>
			
			<script> 
				/**************************
				//Script for the google map
				**************************/

				var map = null;
				var geocoder = null;
				var googleMap = document.getElementById('google-map');

				function showPosition(position) {
				//Fonction to be passed to the browser's geolocation function
					var latLng = new google.maps.LatLng(
						position.coords.latitude, position.coords.longitude);
					var marker = new google.maps.Marker({
					  position: latLng,
					  map: map
					});
					map.setCenter(latLng);
					map.setZoom(15);
				  }

				  function showMap() {
					//This creates the initial map, or update it
					if (!map) {
					  map = new google.maps.Map(googleMap, {
						zoom: 3,
						center: new google.maps.LatLng(37.4419, -94.1419),
						mapTypeId: google.maps.MapTypeId.ROADMAP
					  });
					}
					if(!geocoder){
					  geocoder = new google.maps.Geocoder();
					}

					if (navigator.geolocation) {
					  navigator.geolocation.getCurrentPosition(showPosition);
					}
				  }

				  function updateMap(){
					var newLocation = document.getElementById("location-box").value;
					geocoder.geocode( { 'address': newLocation}, function(results, status) {
					  if (status == google.maps.GeocoderStatus.OK) {
						map.setCenter(results[0].geometry.location, 8);
						var marker = new google.maps.Marker({
						map: map, 
						position: results[0].geometry.location
						});
					  } else {
						alert("Error: " + status);
					  }
					});
				  }
				  
				  //Clicking on the "Show the map" will trigger the showMap() function
				  document.getElementById('init-map').addEventListener('click',showMap, true);
				  //Clicking on the update button will...update (the map)
				  document.getElementById('update-map').addEventListener('click',updateMap, true);
				  
				  //For some reason, this doesn't work as expected : 
				  //pressing "enter" when focused on the location field should return false...but I had to hard-code it in the HTML
				  document.getElementById('geolocation-form').addEventListener('submit',function(){return false;},true);

			</script>

        </section>
        
        <footer class="post_footer">
			Posted by <a href="#">Hieu Luong</a>
			<span> | <a href="#" >View comments</a></span>
			<span> | <a href="#" >Share</a></span>	
        </footer>
      </article>
      <article class="post">
            <header class="post_header">
                Duplicate Video
            </header>
            <section class="post_content">
				<div class="container">
					<video class="video" id="video_player_3" src="http://upload.wikimedia.org/wikipedia/commons/9/93/Elaphants_Dream.ogg" controls></video>
                </div>
				<div class="control_form">
					<br />
					<input type="checkbox" id="ctr_3" onclick="ctrClick('ctr_3', 'video_player_3')" checked="checked"/> Show control
					<br />
					<input type="button" value="Get Preview" onclick="getPreview('preview_video_3', 'video_player_3')" />
					<br />
					<input id="new_src_3" type="text" />
					<input type="button" value="Change" onclick="videoClick('new_src_3', 'video_player_3')" />
				
					<br />
					<input id="next_3" type="text" />
					<input type="submit" value="Jump" onclick="videoJump('next_3', 'video_player_3')"/> 
                        
				    <br />              
	                <input id="angle_to_rotate_3" type="text" />
		            <input type="button" value="Rotate" onclick="rotateVideo('angle_to_rotate_3', 'video_player_3')"/>
					<br />
                    <input type="button" value="Mirror" onclick="mirrorVideo('video_player_3')"/>
                 </div>
				 
				 <div class="container" id="two">
					<video class="video" id="video_player_2" src="http://upload.wikimedia.org/wikipedia/commons/9/93/Elaphants_Dream.ogg" controls></video>
                </div>
                 
            </section>
            
			<footer class="post_footer">
            <p>
				Posted by <a href="#">Thao Le</a>
				<span> | <a href="#" >View comments</a></span>
				<span> | <a href="#" >Share</a></span>
                
              </p>	
			</footer>
        </article>
        
            <article class="post">
            <header class="post_header">
                Interactive Videos
            </header>
            <section class="post_content">
				<div class="container" id="one">
					<video class="video" id="video_player_1" src="http://upload.wikimedia.org/wikipedia/commons/9/93/Elaphants_Dream.ogg" controls></video>
                </div>
				<div class="control_form">
					<br />
					<input type="checkbox" id="ctr_1" onclick="ctrClick('ctr_1', 'video_player_1')" checked="checked"/> Show control
					<br />
					<input type="button" value="Get Preview" onclick="getPreview('preview_video_1', 'video_player_1')" />
					<br />
					<input id="new_src_1" type="text" />
					<input type="button" value="Change" onclick="videoClick('new_src_1', 'video_player_1')" />
				
					<br />
					<input id="next_1" type="text" />
					<input type="submit" value="Jump" onclick="videoJump('next_1', 'video_player_1')"/> 
                        
				    <br />              
	                <input id="angle_to_rotate_1" type="text" />
		            <input type="button" value="Rotate" onclick="rotateVideo('angle_to_rotate_1', 'video_player_1')"/>
					<br />
                    <input type="button" value="Mirror" onclick="mirrorVideo('video_player_1')"/>
                 </div>
                 
            </section>
            
			<footer class="post_footer">
            <p>
				Posted by <a href="#">Thao Le</a>
				<span> | <a href="#" >View comments</a></span>
				<span> | <a href="#" >Share</a></span>
                
              </p>	
			</footer>
        </article>
		
		<article class="post">
            <header class="post_header">
                JukeBox
            </header>
            <section class="post_content">
                <div class="jukeBoxContainer">
					<div class="jukeBoxPlayer">
						<video class="video" id="jukeBoxVideo" src="http://archive.org/download/The_Freedom_That_Comes_With_Terminal_Disease_2/The_Freedom_that_comes_with_Terminal_Disease_2.ogv" controls></video>
						<script type='text/javascript'>
							document.getElementById('jukeBoxVideo').addEventListener('ended',VideoFinish,false);
							function VideoFinish() {
								var videoNo = curVideo.split("-")[1];
								var nextVideo = "video-" + (parseInt(videoNo)+1);
								changeVideo(nextVideo);
							}
						</script>
					</div>
					<div class="playlist"> 
					<ul>
					<li><a href="#video-3" onclick="changeVideo('video-1')"><input type="hidden" id="video-1" value="http://archive.org/download/The_Freedom_That_Comes_With_Terminal_Disease_2/The_Freedom_that_comes_with_Terminal_Disease_2.ogv" />Video 1</a></li>
						<li><a href="#video-2" onclick="changeVideo('video-2')"><input type="hidden" id="video-2" value="http://archive.org/download/I_AM_WCCA_TV13/I_Am_WCCA.ogv">Video 2</a></li>
						<li><a href="#video-1" onclick="changeVideo('video-3')"><input type="hidden" id="video-3" value="http://archive.org/download/InsideMyHead/2011_12_30_04H29M_PM-Title1.ogv">Video 3</a></li>
					</ul>
				</div>
                </div>
				
				
                 
                 
            </section>
            
			<footer class="post_footer">
            <p>
				Posted by <a href="#">Thao Le</a>
				<span> | <a href="#" >View comments</a></span>
				<span> | <a href="#" >Share</a></span>
                
              </p>	
			</footer>
        </article>
   </section>
    
    <aside class="sidebar">
        <h3 class="side_h3">Categories</h3>
        <ul>
            <li><a href="#">Music</a></li>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Others</a></li>
        </ul>
        <h3 class="side_h3">Archive</h3>
        <ul>
            <li><a href="#">November 2012</a></li>
            <li><a href="#">October 2012</a></li>
            <li><a href="#">September 2012</a></li>
            <li><a href="#">Ealier</a></li>
        </ul>
    </aside>
    <div class="cleaner"></div>
    <footer class="footer_bar">
        <p>
        Luong Trong Hieu - Le Quang Thao, WebInt 2012
        </p>
    </footer>
   
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script>    
      

    </script>
    </body>
</html>